<template>
  <div class="rootDiv">
    <vue-particles
        color="#252754"
        :particleOpacity="0.4"
        :particlesNumber="40"
        shapeType="edge"
        :particleSize="2"
        linesColor="#409EFF"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push">
    </vue-particles>
    <div class="root-header">
      <div class="root-header-left">
        <div class="root-header-left-item" v-for="item in htmlUrl" :key="item">
          {{ item.name }}
        </div>
      </div>
      <div class="root-header-right">
        <div class="root-header-right-head">
          <div class="head-img"></div>
        </div>
        <div class="root-header-right-item" v-if="login">
          {{ this.info.name }}
        </div>
        <div class="root-header-right-item" v-if="!login">
          <a href="javascript:void(0)" @click="goToLogin">
            {{ this.info.name }}
          </a>
        </div>
        <div class="root-header-right-item">
          <span v-show="login">
            <a href="javascript:void(0)" @click="goToInfo">我的</a>
          </span>
        </div>
        <div class="root-header-right-item">
          <span v-show="login">
            <a href="javascript:void(0)" @click="exitLogin">退出</a>
          </span>
        </div>
      </div>
    </div>
    <div class="root-body">
      <div class="root-body-icon"></div>
      <div class="root-body-search">
        <div class="root-body-search-box">
          <div class="root-body-search-box-mode">
            <div class="root-body-search-box-mode-info" @click="modeListShowVisible = !modeListShowVisible">
              {{ modeShow }}
              <el-icon v-show="!modeListShowVisible" style="margin: 12px 0 12px 5px"><ArrowDown/></el-icon>
              <el-icon v-show="modeListShowVisible" style="margin: 12px 0 12px 5px"><ArrowUp/></el-icon>
            </div>
            <ul class="box-mode-list" v-show="modeListShowVisible">
              <li v-for="item in optionFind" :key="item">
                {{ item.label }}
              </li>
            </ul>
          </div>
          <div class="line" style="margin-right: 16px;"></div>
          <div class="root-body-search-box-input">
            <input type="text" placeholder="输入名字进行检索" v-model="searchValue" @keyup.enter="search">
          </div>
          <div class="root-body-search-box-icon">
            <a href="javascript: void(0);" title="开始搜索" @click="search">
              <el-icon size="24" color="#0e1d4c">
                <Position />
              </el-icon>
            </a>
          </div>
        </div>
      </div>
      <div class="root-body-show"></div>
    </div>
    <div class="root-footer">
    </div>
  </div>
</template>

<script>
import {ElMessage} from "element-plus";
import router from "@/router";
import {post, TIME_SPLIT} from "@/http";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Search",
  data(){
    return{
      modeFind: "Option1",
      modeShow: "书籍",
      modeListShowVisible: false,
      searchValue: "",
      id: "",
      info: { name: "请登录" },
      login: false,
      htmlUrl: [{
        name: "首页",
        url: "home"
      },{
        name: "出版单位",
        url: "publish"
      },{
        name: "统计分析",
        url: "static"
      },{
        name: "使用帮助",
        url: "help"
      },{
        name: "关于我们",
        url: "us"
      }],
      optionFind: [{
        value: 'Option1',
        label: '书籍',
      },
        {
          value: 'Option2',
          label: '作者',
        },
        {
          value: 'Option3',
          label: '连环画',
        },
        {
          value: 'Option4',
          label: '影像',
        }]
    }
  },
  methods:{
    init(){
      const source = window.sessionStorage.getItem("Id")
      if(source !== null){
        const begin = source.split(';')[1]
        const now = new Date().getDate()
        if(now - Number(begin) < TIME_SPLIT){
          const id = source.split(';')[0]
          let params = new URLSearchParams()
          params.append("id", id)
          post("/api/reader/someReader", params).then(res=>{
            if(res.data.code === 200){
              this.info.name = res.data.data['name']
              this.id = id
              this.login = true
            }
          })
        }
      }
    },
    search(){
      if(this.searchValue === null || this.searchValue.length === 0){
        ElMessage.error("搜索不能为空")
      }
      window.sessionStorage.setItem("SearchKey", this.searchValue)
      router.push("/Reader/ReaderSearch")
    },
    goToInfo(){
      router.push("/Reader/ReaderInfo")
    },
    exitLogin(){
      if(window.sessionStorage.getItem("Id") != null){
        window.sessionStorage.removeItem("Id")
        ElMessage.success("已退出")
        router.push("/Login")
      }
    },
    goToLogin(){
      router.push("/Login")
    }
  },
  created() {
    this.init()
  }
}


// vue-particles的属性：
// color: String类型。默认'#dedede'。粒子颜色。
// particleOpacity: Number类型。默认0.7。粒子透明度。
// particlesNumber: Number类型。默认80。粒子数量。
// shapeType: String类型。默认'circle'。可用的粒子外观类型有：“circle”,“edge”,“triangle”, “polygon”,“star”。
// particleSize: Number类型。默认80。单个粒子大小。
// linesColor: String类型。默认'#dedede'。线条颜色。
// linesWidth: Number类型。默认1。线条宽度。
// lineLinked: 布尔类型。默认true。连接线是否可用。
// lineOpacity: Number类型。默认0.4。线条透明度。
// linesDistance: Number类型。默认150。线条距离。
// moveSpeed: Number类型。默认3。粒子运动速度。
// hoverEffect: 布尔类型。默认true。是否有hover特效。
// hoverMode: String类型。默认true。可用的hover模式有: “grab”, “repulse”, “bubble”。
// clickEffect: 布尔类型。默认true。是否有click特效。
// clickMode: String类型。默认true。可用的click模式有: “push”, “remove”, “repulse”, “bubble”
</script>

<style scoped>

a{
  color: #ffffff;
  outline: none;
  text-decoration: none;
}
.line{
  width: 0;
  height: 20px;
  border: 1px solid gray;
  margin: 10px;
}
#particles-js {
  /*calc(100% - 100px)*/
  width: 100%;
  height: calc(100% - 40px);
  position: absolute;
}
.root-header{
  width: 100%;
  height: 50px;
  display: flex;
  padding-top: 20px;
}
.root-body{
  width: 100%;
  height: calc(100% - 270px);
  display: flex;
  flex-direction: column;
}
.root-footer{
  width: 100%;
  height: 220px;
  background-image: url("/src/assets/img/star.png");
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center;
  /*animation: starFlash 3600ms ease-out infinite alternate;*/
}
/*.rootDiv{*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  display: flex;*/
/*  flex-direction: column;*/
.rootDiv{
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("/src/assets/img/background.png");
  display: flex;
  flex-direction: column;
}


.root-body-search{
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
}
.root-body-icon{
  width: 100%;
  height: 50%;
}
.root-body-show{
  width: 100%;
  height: calc(50% - 50px);
}

.root-body-search-box{
  height: 40px;
  width: calc(60% - 2px);
  border: 1px solid gray;
  border-radius: 10px;
  background-color: #ffffff;
  z-index: 9999;
  display: flex;
}

.root-body-search-box-mode{
  height: 100%;
  border: none;
}
.box-mode-list{
  z-index: 9999;
}
.root-body-search-box-mode li{
  list-style: none;
  width: 78px;
  margin-left: 2px;
  height: 24px;
  background-color: #ffffff;
  line-height: 24px;
  text-align: center;
}

.root-body-search-box-mode li:hover{
  background-color: #6139aa;
}
.root-body-search-box-mode-info{
  width: 80px;
  border-radius: 10px;
  text-align: center;
  line-height: 40px;
  margin-left: 10px;
  font-size: 16px;
  display: flex;
}

.root-body-search-box-input{
  width: calc(100% - 120px);
  height: 40px;
}

.root-body-search-box-input input{
  border: none;
  font-size: 16px;
  outline:none;
  height: 40px;
  width: 100%;
}
.root-body-search-box-icon{
  height: 100%;
  width: 40px;
  padding: 8px;
}

.root-header-left{
  flex: 1;
  display: flex;
  padding-left: 50px;
  /*justify-content: space-around;*/
}

.root-header-left-item{
  width: 120px;
  height: 100%;
  margin-right: 30px;
  color: #ffffff;
  z-index: 9999;
}
.root-header-left-item:hover{
  color: blue;
}

.root-header-right{
  flex: 1;
  display: flex;
}

.root-header-right-head{
  height: 100%;
  width: 30px;
  margin-left: 50%;
  z-index: 9999;
}
.head-img{
  height: 36px;
  width: 36px;
  border-radius: 36px;
  margin: auto 0;
  background-image: url("/src/assets/img/head.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.root-header-right-item{
  height: 30px;
  width: 80px;
  color: #ffffff;
  text-align: center;
  line-height: 30px;
  margin-left: 30px;
  z-index: 9999;
}

.root-header-right-item:hover {
  color: #0df1f6;
}

.root-header-right-item:hover a{
  color: #0df1f6;
}
</style>



